<script setup>

import Comp1 from "./Comp1.vue";
import Comp2 from "./Comp2.vue";
import Comp3 from "./Comp3.vue";

import {markRaw, ref} from "vue";

let comp = ref(null)

// 注意事项：传入的参数名称不能和 原有的变量名一致，否则不能识别
function changeComponent(com) {
  comp.value = markRaw(com)
}
</script>

<template>
  <button v-on:click="changeComponent(Comp1)">Comp1</button>
  <button v-on:click="changeComponent(Comp2)">Comp2</button>
  <button v-on:click="changeComponent(Comp3)">Comp3</button>
  <hr>


  <!--字符串形式-->
  <!--<keep-alive include="Comp1, Comp3">
    <component v-bind:is="comp"></component>
  </keep-alive>-->

  <!--正则表达式形式-->
  <!--<keep-alive v-bind:include="/Comp1 | Comp3/">
    <component v-bind:is="comp"></component>
  </keep-alive>-->

  <!--数组形式-->
  <keep-alive v-bind:include="['Comp1', 'Comp3']">
    <component v-bind:is="comp"></component>
  </keep-alive>

</template>

<style scoped>

</style>